<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{ login_user }}</h1>
			<input type="text" v-model="username" placeholder="用户名"/><br>
			<input type="password" v-model="password" placeholder="密码"/><br>
			<input type="checkbox" v-model="isRead" />《使用协议》<br>
			<button type="button" @click="login">登录</button>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					login_user:'',
					username:'',
					password:'',
					isRead: false
				},
				methods:{
					login(){
						if(this.username == '' && this.password == ''){
							alert('请先填写用户名和密码')
							return false
						}
						if(!this.isRead){
							alert('请先同意使用协议')
							return false
						}
						this.login_user = this.username
						this.output()
					},
					output(){
						console.log(this.username,this.password)
					}
				}
			});
		</script>
	</body>
</html>
